﻿、@{
    Layout = null;
}
<!DOCTYPE html>


<meta name="viewport" content="width=device-width" />
<title>show</title>
<link href="~/BootstrapSouce/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/BootstrapSouce/js/jquery.min.js"></script>
<script src="~/BootstrapSouce/js/bootstrap.min.js"></script>
<html>
<head>
    <meta charset="utf-8">
    <title>css3下划线跟随文字导航菜单特效</title>
    <style>
        body {
            background: #ededed;
            padding: 0 20px;
            margin: 0;
            font-family: 'Open Sans', Arial, sans-serif;
        }

        h1 {
            text-align: center;
            margin: 80px 0;
        }

        .mynav ul {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            list-style-type: none;
            padding: 0;
        }

        .mynav li:not(:last-child) {
            margin-right: 20px;
        }

        .mynav a {
            display: block;
            font-size: 20px;
            color: black;
            text-decoration: none;
            padding: 7px 15px;
        }

        .target {
            position: absolute;
            border-bottom: 4px solid transparent;
            z-index: -1;
            -webkit-transform: translateX(-60px);
            transform: translateX(-60px);
        }

        .mynav a,
        .target {
            -webkit-transition: all .35s ease-in-out;
            transition: all .35s ease-in-out;
        }
    </style>



</head>
<body>
    <script>
        "use strict";

        (function () {

            var target = document.querySelector(".target");
            var links = document.querySelectorAll(".mynav a");
            var colors = ["deepskyblue", "orange", "firebrick", "gold", "magenta", "black", "darkblue"];


            function mouseenterFunc() {
                if (!this.parentNode.classList.contains("active")) {
                    for (var i = 0; i < links.length; i++) {
                        if (links[i].parentNode.classList.contains("active")) {

                            links[i].parentNode.classList.remove("active");

                        }
                        links[i].style.opacity = "0.25";
                    }

                    this.parentNode.classList.add("active");
                    this.style.opacity = "1";

                    var width = this.getBoundingClientRect().width;
                    var height = this.getBoundingClientRect().height;
                    var left = this.getBoundingClientRect().left + window.pageXOffset;
                    var top = this.getBoundingClientRect().top + window.pageYOffset;
                    var color = colors[Math.floor(Math.random() * colors.length)];

                    target.style.width = width + "px";
                    target.style.height = height + "px";
                    target.style.left = left + "px";
                    target.style.top = top + "px";
                    target.style.borderColor = color;
                    target.style.transform = "none";
                }
            }

            for (var i = 0; i < links.length; i++) {
                links[i].addEventListener("click", function (e) {

                    return e.preventDefault();

                });

                links[i].addEventListener("mouseenter", mouseenterFunc);

            }
            function resizeFunc() {
                var active = document.querySelector(".mynav li.active");

                if (active) {
                    var left = active.getBoundingClientRect().left + window.pageXOffset;
                    var top = active.getBoundingClientRect().top + window.pageYOffset;

                    target.style.left = left + "px";
                    target.style.top = top + "px";

                }
            }

            window.addEventListener("resize", resizeFunc);
        })();
    </script>

    <nav class="mynav">
        <ul>
            <li><a href="#">主页</a></li>
            <li><a href="#" data-toggle="modal" data-target="#myModal">菜品添加</a></li>
            <li><a href="/admin/ToMenushow">显示今日推荐</a></li>
            <li><a href="/admin/ReMenushow">显示推荐套餐</a></li>
            <li><a href="#" data-toggle="modal" data-target="#myModal2">显示轮播推荐</a></li>
            <li><a href=""></a></li>
        </ul>
    </nav>
    <nav class="mynav">
        <ul>
            <li><input id="Button1" type="button" value="添加今日推荐" onclick="fun()" /></li>
            <li><input id="Button1" type="button" value="添加推荐套餐" onclick="funre()" /></li>
            <li><input id="Button1" type="button" value="添加轮播推荐" onclick="AddAll()" /></li>
        </ul>
    </nav>
    <span class="target"></span>
    <table class="table table-striped table-hover table-bordered" width="300" height="500">
        <caption>菜单表显示</caption>
        <thead>
            <tr>
                <th onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#FFcccc'"><input type="checkbox" id="checkbox1"  /></th>
                <th onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#FFcccc'">菜名</th>
                <th onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#FFcccc'">图片</th>
                <th onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#FFcccc'">简介</th>
                <th onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#FFcccc'">价格</th>
                <th onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#FFcccc'">操作</th>
            </tr>
        </thead>
        <tbody id="dd"></tbody>
    </table>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">

        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        模态框（Modal）标题

                    </h4>
                </div>
                <div class="modal-body">
                    添加今日推荐
                    <form action="/admin/ADDDO" method="post" enctype="multipart/form-data">
                        菜品名称：<input id="Text1" type="text" name="name" /><br />
                        图片:<input type="file" name="File" />
                        菜品简介:<input id="Text1" type="text" name="jianjie" /><br />
                        菜品价格:<input id="Text1" type="text" name="price" /><br />
                        菜品类型:<select id="Sel1" name="Sel1"><option value="1">中餐</option><option value="2">西餐</option><option value="3">饮品</option><option value="4">点心</option><option value="5">套餐</option><option value="5">工作餐餐</option></select>
                        <br /><input id="Submit1" type="submit" value="添加" />
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">
                        关闭
                    </button>
                    <button type="button" class="btn btn-primary">
                        添加
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">

        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        模态框（Modal）标题

                    </h4>
                </div>
                <div class="modal-body">
                    添加今日推荐
                    <form action="/admin/ADDDO" method="post" enctype="multipart/form-data">
                        <input id="id" type="hidden" name="name" /><br />
                        菜品名称：<input id="name" type="text" name="name" /><br />
                        图片:<input type="text" name="File" id="photo" /><br />
                        菜品简介:<input id="jian" type="text" name="jianjie" /><br />
                        菜品价格:<input id="price" type="text" name="price" /><br />                      
                        <input id="id" type="button" value="添加" onclick="xiu()" />
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">
                        关闭
                    </button>
               
                </div>
            </div><!-- //.modal-content -->
        </div><!-- /.modal -->
    </div>
</body>
</html>
<script>
    $(function () {
        $.ajax({
            type: "get", //访问WebService使用Post方式请求

            url: "http://localhost:19451/api/Menu/getshow", //调用WebService

            success: function (response) { //回调函数，result，返回值
                //alert(response)
                var tr = "";

                $(response).each(function (i, item) {

                   
                    tr += "<tr><td><input id='Checkbox1' name='che' type='checkbox' class='b' value='" + item.MenuId + "'/></td><td>" + item.MenuName + "</td><td><img  src='" + item.MenuPhoto + "' style='width:120px;height:90px;'/></td><td>" + item.MenuDescrib + "</td><td>" + item.MenuPrice + "</td><td><input id='Button1' type='button'onclick='update(" + item.MenuId + ")'   value='修改'/>&nbsp &nbsp &nbsp<input id='Button1' type='button' onclick='detele(" + item.MenuId + ")' value='删除' /></td></tr>"

                }

              )
                $("#dd").append(tr);
            }

        });

    })
    function AddAll() {
        var ids = "";
       
        if ($("input[name=che]:checked").length == 0) {
            alert("请至少选择一项")

        } else if ($("input[name=che]:checked").length > 5) {
            alert("最多选择五项")
        }
        else
        {
            var w = new Array();
            $("input[name=che]:checked").each(function (i,item) {
                w.push($(this).val());

            })
         
                for (var i = 0; i < w.length; i++) {
                    $.ajax({
                        url: "http://localhost:19451/api/Stand/GetAddStand",
                        type: "Get",
                        data: { id: w[i] },
                        success: function (data) {
                            if (data > 0) {

                            }
                        }
                    })

             
               alert("已全部添加成功！");
            }

        }
    }
    function fun() {
  
        var id = "";
        if ($("input[name=che]:checked").length == 4) {
            $.ajax({
                type: "Get",
                url: "http://localhost:19451/api/ToMenu/GetdelToMenu",
                success: function (response) {

                }
            })
            $("input[name=che]:checked").each(function () {
                id = $(this).val();
                $.ajax({

                    type: 'get',
                    url: 'http://localhost:19451/api/menu/GetMenuIdshow',
                    data: {
                        id: id,
                    },
                    success: function (data) {
                        alert("请点击确定继续添加")
                        if (data == "") {


                        }
                        else {
                            var arr = JSON.parse(data);
                            $(arr).each(function (i, obj) {
                                $.ajax({
                                    type: "Get", //访问WebService使用Post方式请求
                                    url: "http://localhost:19451/api/ToMenu/GetAddToMenu",
                                    data: {
                                        Toid: obj.MenuId,
                                        Toname: obj.MenuName,
                                        Tophoto: obj.MenuPhoto,
                                        Todescrib: obj.MenuDescrib,
                                        Toprice: obj.MenuPrice,

                                    },
                                    success: function (response) { //回调函数，result，返回值


                                        if (response == 1) {

                                        }

                                        else {
                                            alert('添加失败');
                                        }
                                    }
                                })
                                location.href = "/admin/ToMenushow";
                            })
                        }
                    }
                })
            })
        }
        else {
            alert("只能选择4个推荐菜");
            return;
        }
    }
    function funre() {
   
        var id = "";
        if ($("input[name=che]:checked").length == 3) {
            $.ajax({
                type: "Get",
                url: "http://localhost:19451/api/ReMenu/GetdelReMenu",
                success: function (response) {
                }
            })
            $("input[name=che]:checked").each(function () {
                id = $(this).val();
                $.ajax({

                    type: 'get',
                    url: 'http://localhost:19451/api/menu/GetMenuIdshow',
                    data: {
                        id: id,
                    },
                    success: function (data) {
                        alert("请点击确定继续添加")
                        if (data == "") {

                        }
                        else {
                            var arr = JSON.parse(data);
                            $(arr).each(function (i, obj) {
                                $.ajax({
                                    type: "Get", //访问WebService使用Post方式请求
                                    url: "http://localhost:19451/api/ReMenu/GetAddReMenu",
                                    data: {
                                        Reid: obj.MenuId,
                                        Rename: obj.MenuName,
                                        Rephoto: obj.MenuPhoto,
                                        Redescrib: obj.MenuDescrib,
                                        Reprice: obj.MenuPrice,

                                    },
                                    success: function (response) { //回调函数，result，返回值

                                        if (response == 1) {

                                        }
                                        else {
                                            alert('添加失败');
                                        }
                                    }
                                })
                                location.href = "/admin/ReMenushow";
                            })
                        }
                    }
                })
            })
        }
        else {
            alert("只能选择3个推荐菜");
            return;
        }
    }
    function detele(n) {
        $.ajax({

            type: "Get",
            url: "http://localhost:19451/api/Menu/Getdelete/",
            data: { id: n },
            success: function (response) {

                if (response > 0) {

                    alert("删除成功！");

                }
                else {
                    alert("删除失败！");

                }

            }

        })


    }
    function update(w) {
        ;

        $.ajax({

            type: "Get",
            url: "http://localhost:19451/api/menu/GetMenuIdshow",
            data: { id: w },
            success: function (response) { //回调函数，result，返回值

                $('#myModal2').modal('show')
                var w = JSON.parse(response)
                $(w).each(function (i, item) {
                    $("#id").val(item.MenuId);
                    $("#name").val(item.MenuName);
                    $("#photo").val(item.MenuPhoto);
                    $("#price").val(item.MenuPrice);
                    $("#jian").val(item.MenuDescrib);


                })

            }

        })

    }
    function xiu() {
        var id = $("#id").val();
        var name = $("#name").val();
        var photo = $("#photo").val();
        var jian = $("#jian").val();
        var price = $("#price").val()

        $.ajax({
            type: "Get", //访问WebService使用Post方式请求
            url: "http://localhost:19451/api/menu/getupdate",
            data: {
                MenuId: id,
                MenuName: name,
                MenuPhoto: photo,
                MenuDescrib: jian,
                MenuPrice: price,

            },
            success: function (response) {
               
                if (response > 0) {
                    alert('修改成功');
                    location.href = "/admin/show";

                }
                else {
                    alert('修改失败');

                }

            }


        }

 )



    }


</script>

